<template>
	<div class="home">
		<div class="home__top" style="justify-content: space-between;align-items: center;">
			<div style="display: flex;align-items: center;">
				<div class="home__top__btn" v-for='(item,index) in btnlist' :key="index" :style="{background:item.bgc}">
					{{item.text}}</div>
			</div>
			<div style="display: flex;align-items: center;">
				<el-checkbox-group v-model="checkList">
					<el-checkbox label="密码123"></el-checkbox>
					<el-checkbox label="全部"></el-checkbox>
					<el-checkbox label="在职"></el-checkbox>
					<el-checkbox label="离职"></el-checkbox>
				</el-checkbox-group>
				<div style="width: 208px;margin-left: 34px;height: 36px;display: flex;align-items: center;">
					<el-input v-model="input" placeholder="搜索"></el-input>
				</div>
				<img src="~@/assets/icon.png" style="width: 42px;height: 36px;margin-left: 5px;" alt="" />
			</div>
		</div>
		<div class="home__con">
			<el-table border :data="tableData" stripe style="width: 100%" :height="`calc(100% - ${footerh}px)`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A"}' :cell-style="{color:'#1F163A'}">
				<el-table-column type="index" label="行" width="56">
				</el-table-column>
				<el-table-column prop="bm" label="编号" width="124">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="209">
				</el-table-column>
				<el-table-column prop="mm" label="登陆密码" width="209">
				</el-table-column>
				<el-table-column prop="yh" label="登陆用户" width="209">
				</el-table-column>
				<el-table-column prop="lx" label="APP类型" width="271">
				</el-table-column>
				<el-table-column prop="gxs" label="工序数" width="209">
				</el-table-column>
				<el-table-column prop="qx" label="APP权限" width="209">
				</el-table-column>
				<el-table-column prop="djqx" label="单据权限" width="209">
				</el-table-column>
				<el-table-column prop="bm" label="编号" width="124">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="209">
				</el-table-column>
				<el-table-column prop="mm" label="登陆密码" width="209">
				</el-table-column>
				<el-table-column prop="yh" label="登陆用户" width="209">
				</el-table-column>
				<el-table-column prop="lx" label="APP类型" width="271">
				</el-table-column>
				<el-table-column prop="gxs" label="工序数" width="209">
				</el-table-column>
				<el-table-column prop="qx" label="APP权限" width="209">
				</el-table-column>
				<el-table-column prop="djqx" label="单据权限" width="209">
				</el-table-column>
			</el-table>
			<div class="footer" ref="footer">
				<div>
					显示第1到第22条记录，总共 3272 条记录
				</div>
				<el-pagination background layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input:'',
				checkList: ['密码123','全部'],
				btnlist: [{
					text: '剪切导入',
					bgc: 'rgba(236, 236, 236, .5)'
				}, {
					text: '钉钉导入',
					bgc: 'rgba(236, 236, 236, .5)'
				}, {
					text: '公众号绑定',
					bgc: 'rgba(74, 119, 246, .5)'
				}],
				tableData: [{
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}, {
					bm: 10002,
					name: '10002',
					mm: '1161',
					yh: '成品入库',
					lx: '计件|管理|查询|材料扫码',
					gxs: '1383',
					qx: '141',
					djqx: "单据权限"
				}],
				footerh: 67
			}
		},
		created() {
			// this.
		},
		mounted() {
			this.footerh = this.$refs.footer.offsetHeight
			console.log(this.footerh)
		},
	}
</script>
<style scoped>
	.home {
		background-color: #fff;
		height: calc(100% - 26px);
		border-radius: 5px;
		padding: 13px 10px;

	}

	.home__top {
		display: flex;
		align-items: center;

	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		/* background-color: rgba(74, 119, 246, .5); */
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.home__con {
		margin-top: 10px;
		height: calc(100% - 50px);
	}

	/deep/.el-table .cell {
		text-align: center !important;
	}

	.box {
		width: 60px;
		height: 22px;
		border-radius: 3px;
		text-align: center;
		line-height: 22px;
		color: #fff;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 48px;
	}
</style>